<!DOCTYPE html>
<!--
fullpage.js
实验页面
and
语义化HTML，分享PTT
-->
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>语义化的HTML</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <!--fullpage.css-->
    <link href="css/jquery.fullPage.css" rel="stylesheet" type="text/css" rel="external nofollow"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!--页面开始-->
    <div id="fullpage">
      <!--第一页开始-->
      <div class="section " id="section0">
        <h1>fullPage.js</h1>
        <p>Create Beautiful Fullscreen Scrolling Websites</p>
        <img src="imgs/fullPage.png" alt="fullPage" />
      </div>
      <!--第一页结束第二页开始-->
      <div class="section" id="section1">
        <!--第二页第一个板块开始-->
        <div class="slide">
          <div class="intro">
            <h1>Create Sliders</h1>
            <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
            <img src="imgs/slider.png" alt="slider" />
          </div>

        </div>
        <!--第二页第二个板块-->
        <div class="slide">
          <div class="intro">
            <img src="imgs/1.png" alt="simple" />
            <h1>Simple</h1>
            <p>Easy to use. Configurable and customizable.</p>
          </div>
        </div>
        <!--第二页第三个板块-->
        <div class="slide">
          <div class="intro">
            <img src="imgs/2.png" alt="Cool" />
            <h1>Cool</h1>
            <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
          </div>
        </div>
        <!--第二页第四个板块开始-->
        <div class="slide">
          <div class="intro">
            <img src="imgs/3.png" alt="Compatible" />
            <h1>Compatible</h1>
            <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
          </div>
        </div>
        <!--第二页第四板块结束-->
      </div>
      <!--第三个页面开始-->
      <div class="section" id="section2">
        <div class="intro">
          <h1>Example</h1>
          <p>HTML markup example to define 4 sections.</p>
          <img src="imgs/example2.png" alt="example" />
        </div>
      </div>
      <!--第四个板块开始-->
      <div class="section" id="section3">
        <div class="intro">
          <h1>Working On Tablets</h1>
          <p>
            Designed to fit to different screen sizes as well as tablet and mobile devices.
            <br /><br /><br /><br /><br /><br />
          </p>
        </div>
        <img src="imgs/tablets.png" alt="tablets" />
      </div>
      <!--第四个板块结束-->
    </div>





    <!--END 页面-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <!--fullpage.js引入-->
    <script src="js/jquery.fullPage.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $('#fullpage').fullpage({
          sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
          anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
          //menu: '#menu'
          
        });
       
      });
    </script>
  </body>
</html>
